<template>
  <div class="product-item" v-if="wish != null">
    <p class="product-image">
      <img :src="wish.cover" />
    </p>
    <p class="product-name">
      {{ wish.title.substring(0, 12) }}
    </p>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  wish: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped lang="less">
.product-item {
  width: 100px;
  height: 100px;
  text-align: center;
}

.product-image img {
  max-width: 100%;
  border-radius: 8px;
}

.product-name {
  font-size: 1.2em;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
</style>
